<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>播放器</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin:auto;
            overflow: hidden;
        }
        body {
            display:flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-start;
        }
        #playerContainer video:last-child {
            border: 4px solid red;
            object-fit: fill;
            transform: scale(2, 2) translateX(150px) translateY(-50px);
        }
    </style>
</head>
<body>
<div id="playerContainer"></div>
<script src="./flv.js" charset="utf-8"></script>
<script type="text/javascript">
    function createPlayer () {
        const $video = document.createElement('video');
        const config = {
            enableWorker: false,
            lazyLoadMaxDuration: 3 * 60,
            seekType: 'range',
        };
        $video.muted = true;
        $video.width = 600;
        $video.height = 400;
        let flvPlayer = flvjs.createPlayer({
            url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv',
            type: 'flv',
            isLive: true,
            hasVideo: true,
            hasAudio: false,
            withCredentials: false,
        }, config);
        flvPlayer.attachMediaElement($video);
        flvPlayer.load();
        flvPlayer.play();
        document.querySelector('#playerContainer').appendChild($video);
    }

    var videoLength = 2;
    while (videoLength) {
        createPlayer ();
        videoLength--;
    }

</script>
</body>
</html>
